import React from 'react';
import { history } from 'umi'
import { PageContainer } from '@/molecules';
import authHelper from '@/utils/auth/helper';
import { defaultFormatResult, useRequest } from '@/hooks';

import Talents from './Talents';
import BlackList from './BlackList';
import { getTalentTypeConunts, setRead } from './service';

const { checkCode } = authHelper;

const TalentsManagement = ({ location }) => {
    const { query } = location;
    const [activeKey, setActiveKey] = React.useState(query?.activeKey || '1');
    const [savedQuery, setSavedQuery] = React.useState(null);
    // 数量
    const { data: countsData, run: refreshCounts } = useRequest(() => getTalentTypeConunts(), {
        ...defaultFormatResult
    });

    const handleDataExchange = React.useCallback(() => {
        refreshCounts();
    }, []);

    // 跳转明细
    const handleJumpDetail = React.useCallback(async (readFlag, talentCode) => {
        if (!readFlag) {
            await setRead(talentCode);
        }
        history.push({
            pathname: '/office/personnelManagement/recruitment/talentsManagement/resumeDetail',
            query: { talentCode }
        });
    }, []);

    const [tabList] = React.useState([
        {
            key: '1',
            tab: '人才库',
            code: 'office:recruitment:talentsManagement:common',
            component: (
                <Talents
                    pageType="common"
                    key="common"
                    onDataExchange={handleDataExchange}
                    handleJumpDetail={handleJumpDetail}
                />
            )
        },
        {
            key: '2',
            tab: '高级库',
            code: 'office:recruitment:talentsManagement:senior',
            component: (
                <Talents
                    pageType="senior"
                    key="senior"
                    onDataExchange={handleDataExchange}
                    handleJumpDetail={handleJumpDetail}
                />
            )
        },
        {
            key: '9',
            tab: '黑名单',
            code: 'office:recruitment:talentsManagement:blackList',
            component: <BlackList onDataExchange={handleDataExchange} handleJumpDetail={handleJumpDetail} />
        }
    ]);

    const handleTabChange = key => {
        refreshCounts();
        setActiveKey(key);
        history.push({ query: { ...savedQuery?.[key], activeKey: key } });
    };

    React.useEffect(() => {
        const key = query?.activeKey || '1';
        setActiveKey(key);
        setSavedQuery({
            ...savedQuery,
            [key]: query
        });
    }, [query]);

    const filterList = (tabList.filter(item => checkCode(item.code)) || []).map(tab => {
        const countData = (Array.isArray(countsData) ? countsData : []).filter(
            c => tab.key === c.archiveType.toString()
        );
        return {
            ...tab,
            tab: `${tab.tab}（${countData[0]?.count || 0}）`
        };
    });
    // React.useEffect(() => {
    //     if (filterList && filterList.length > 0) {
    //         if (!filterList.find(item => item.key === activeKey)) {
    //             setActiveKey(filterList[0]?.key || '');
    //         }
    //     }
    // }, [JSON.stringify(filterList)]);

    return (
        <PageContainer tabList={filterList} activeTabKey={activeKey} onTabChange={handleTabChange}>
            {filterList?.find(item => item.key === activeKey)?.component}
        </PageContainer>
    );
};

export default TalentsManagement;
